import Vue from 'vue'
// import App from './App.vue'
/* 第一天代码 */
// WebPack 代码在另外的一个仓库：https://gitee.com/Megasu/webpack64
/* 第二天代码 */
// import App from './day02/01-插值表达式.vue'
// import App from './day02/02-v-bind属性绑定.vue'
// import App from './day02/03-vue事件_v-on绑定事件.vue'
// import App from './day02/04-vue事件_接收事件对象.vue'
// import App from './day02/05-vue事件_修饰符.vue'
// import App from './day02/06-vue事件_按键修饰符.vue'
// import App from './day02/07-课上练习_翻转世界.vue'
// import App from './day02/08-vue指令_v-model基础使用.vue'
// import App from './day02/09-vue指令_v-model绑定到不同的表单标签.vue'
// import App from './day02/10-vue指令_v-model修饰符.vue'
/* 第三天代码 */
// import App from './day03/01-vue指令_v-text和v-html.vue'
// import App from './day03/02-vue指令_v-show和v-if.vue'
// import App from './day03/03-案例_折叠面板.vue'
// import App from './day03/04-vue指令_v-for.vue'
// import App from './day03/05-v-for_更新检测.vue'
// import App from './day03/06-v-for就地更新.vue'
// import App from './day03/07-v-for的key属性作用.vue'
// import App from './day03/08-动态class.vue'
// import App from './day03/09-动态style.vue'
// import App from './day03/10-案例_品牌管理.vue'
// import App from './day03/11-vue过滤器基础.vue'
/* 第四天代码 */
// import App from './day04/01-vue计算属性.vue'
// import App from './day04/02-vue计算属性缓存.vue'
// import App from './day04/03-案例_品牌管理.vue'
// import App from './day04/04-计算属性完整写法.vue'
// import App from './day04/05-小选影响全选.vue'
// import App from './day04/06-侦听器.vue'
// import App from './day04/03-案例_品牌管理.vue'
// import App from './day04/07-侦听器完整写法.vue'
// import App from './day04/08-没有组件_折叠面板.vue'
// import App from './day04/09-引入组件_折叠面板.vue'
// import App from './day04/10-组件通讯_父传子.vue'
// import App from './day04/11-组件配合v-for循环.vue'
/* 第五天代码 */
// import App from './day05/01-综合案例_Todo.vue'
// import App from './day05/02-生命周期的父组件.vue'
// import App from './day05/03-axios_发送请求初体验.vue'
/* 第六天代码 */
// -----------  购物车案例代码 开始 -----------
// import 'bootstrap/dist/css/bootstrap.css'
// import App from './day06/01-案例_购物车.vue'
// // 导入 axios (注意：这里还是独立作用域的，axios 只能在 main.js 内使用)
// import axios from 'axios';
// axios.defaults.baseURL = 'https://www.escook.cn'
// // 挂载到 Vue 原型上，所有Vue组件都是Vue的实例对象
// Vue.prototype.$axios = axios
// -----------  购物车案例代码 结束 -----------

// import App from './day06/02-获取DOM元素.vue'
// import App from './day06/03-获取组件对象.vue'
// import App from './day06/04-$nextTick使用.vue'
// import App from './day06/05-$nextTick使用场景.vue'
// import App from './day06/06-组件name属性作用.vue'
// import App from './day06/07-动态组件.vue'
// import App from './day06/08-组件缓存.vue'

/* 第七天代码 */
// import App from './day07/01-组件插槽.vue'
// import App from './day07/02-具名插槽.vue'
// import App from './day07/03-作用域插槽.vue'
// import App from './day07/04-作用域插槽使用场景.vue'
// import App from './day07/05-自定义指令.vue'
// // 全局注册一个自定义指令，项目中任意的 vue 文件都能通过 v-gfocus 调用
// Vue.directive('gfocus', {
//   // 添加指令的标签在插入DOM结构时，会自动触发一次 inserted 函数
//   inserted(el) {
//     // console.log('自定义指令运行了', el)
//     el.focus()
//   },
// })
// import App from './day07/06-案例-tabBar.vue'
// // 引入 bootstrap 样式
// import 'bootstrap/dist/css/bootstrap.css'
// import './assets/fonts/iconfont.css'
// // 在入口引入了 axios
// import axios from 'axios'
// // 配置了请求服务器的基地址
// axios.defaults.baseURL = 'https://www.escook.cn'
// // 并添加到 Vue 原型上
// Vue.prototype.$axios = axios;
// // 通过自定义指令封装了一个自动获取焦点的功能
// Vue.directive('gfocus', {
//   // 添加指令的标签在插入DOM结构时，会自动触发一次 inserted 函数
//   inserted(el) {
//     // console.log('自定义指令运行了', el)
//     el.focus()
//   },
// })

/* 第八天代码 */
// // import App from './day08/01-路由基本使用.vue'
// // import App from './day08/02-声明式导航.vue'
// // import App from './day08/03-声明式导航-传参.vue'
// // import App from './day08/04-编程式导航.vue'
// // import App from './day08/05-编程式导航-传参.vue'
// // import App from './day08/06-声明式导航-两个类名.vue'
// // import App from './day08/07-Vant组件库体验.vue'
// import App from './day08/08-vant弹出框.vue'
// // 方式1：全部引入
// // // 全局引入 Vant 组件库的包
// // import Vant from 'vant'
// // // 导入组件库全部样式
// // import 'vant/lib/index.css'
// // // 全局注册了所有 Vant 组件
// // Vue.use(Vant)
// // 方式3：自动按需引入（官方推荐）
// import { Button, Icon } from 'vant'
// // 安装并配置 babel-plugin-import 自动变成 下面两行
// // import Button from 'vant/lib/button';
// // import 'vant/lib/button/style';
// // 🔔注意：只是自动引入组件而已，还需要自己注册组件才能使用
// Vue.use(Button)
// // import { Icon } from 'vant'
// Vue.use(Icon)
// // .vue文件内局部注册：可通过 components:{ [Button.name]:Button } 实现

// // 1. 安装
// // yarn add vue-router
// // 2. 导入路由
// import VueRouter from 'vue-router'
// //获取原型对象上的push函数
// const originalPush = VueRouter.prototype.push
// //修改原型对象中的push方法
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch((err) => err)
// }
// // 3. 使用路由插件
// Vue.use(VueRouter)
// // 4. 创建路由规则数组
// import Find from './day08/views/Find.vue'
// import My from './day08/views/My.vue'
// import Part from './day08/views/Part.vue'
// import NotFound from './day08/views/NotFound.vue'
// import Recommend from './day08/views/Second/Recommend.vue'
// import Ranking from './day08/views/Second/Ranking.vue'
// import Songlist from './day08/views/Second/Songlist.vue'
// const routes = [
//   // 匹配到 / 根路径，通过 redirect 重定向到 /find，加载 Find 组件
//   { path: '/', redirect: '/find' },
//   // 注意 name 是路由的名字，字符串格式
//   {
//     path: '/find',
//     component: Find,
//     name: 'Find',
//     // 💥 注意：二级路由不需要写 /
//     children: [
//       { path: '', redirect: 'recommend' },
//       { path: 'recommend', component: Recommend },
//       { path: 'ranking', component: Ranking },
//       { path: 'songlist', component: Songlist },
//       // { path: '*', component: NotFound },
//     ],
//   },
//   { path: '/my', component: My, name: 'My' },
//   { path: '/part', component: Part, name: 'Part' },
//   { path: '/part/:name', component: Part, name: 'Part' },
//   // path匹配*(任意路径)，如果路由未命中任何规则, 给出一个兜底的404页面
//   { path: '*', component: NotFound },
// ]
// // 5. 创建路由对象 -  传入规则
// const router = new VueRouter({
//   routes: routes,
//   // 默认模式是 hash
//   // 💥 history 模式，打包上线后需要后台支持，VueRouter官网有后端配置的参考代码
//   mode: 'history',
// })

// // 目标：路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转
// // 场景: 当你要对路由权限判断时
// // to       目标：去哪里？要跳转到的路由
// // from     来源：来自哪里？
// // next     一个函数，可用于控制路由 放行 或者 不跳转
// let isLogin = false
// router.beforeEach((to, from, next) => {
//   // console.log('to', to)
//   // console.log('from', from)
//   // console.log('next', next)
//   if (to.path === '/my' && isLogin === false) {
//     alert('请登录')
//     // next(false)  表示不跳转
//     next(false)
//   } else {
//     // 放行
//     next()
//   }
// })

// Vue.config.productionTip = false

// new Vue({
//   // 🔔 6.把路由对象注入到 new Vue 实例中
//   router: router,
//   render: (h) => h(App),
// }).$mount('#app')

/* 第九天代码 */
import App from './day09/App.vue'
// import App from './day10/01-List列表组件-加载更多.vue'
Vue.config.productionTip = false

import { Tabbar, TabbarItem } from 'vant'
import { NavBar } from 'vant'
import { Col, Row } from 'vant'
import { Image as VanImage } from 'vant'
import { Cell, CellGroup } from 'vant'
import { Icon } from 'vant'
import { Search } from 'vant'
import { List } from 'vant'

Vue.use(List)
Vue.use(Search)
Vue.use(Icon)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(VanImage)
Vue.use(Row)
Vue.use(Col)
Vue.use(NavBar)
Vue.use(Tabbar)
Vue.use(TabbarItem)

import './day09/styles/reset.css'
import './day09/mobile/flexible'
import router from './day09/router/index'

// import { aa } from './知识点补充/模块化编程导出'
// console.log(11111111111, aa)

new Vue({
  // 6. 在 Vue 中注入路由实例
  router: router,
  render: (h) => h(App),
}).$mount('#app')
